<template>
  <div class="house_content">
    <div v-if="houseContent.premises">
      <div class="title">
        <span>{{houseContent.premises.name}}</span>
      </div>
      <div class="label">
        <span v-for="item in houseContent.premises.labels">{{item}}</span>
      </div>
    </div>

    <div class="pay_area">
      <div>{{houseContent.sell}}万</div>
      <div>{{houseContent.ht_room_num}}室{{houseContent.ht_office_num}}厅{{houseContent.ht_toilet_num}}卫</div>
      <div>{{houseContent.acreage}}平米</div>
    </div>
    <div class="jiben_information">
      <div class="jiben_title">
        <div>基本信息</div>
        <div><span class="iconfont icon-jingshigantanhao"></span>虚假信息</div>
      </div>
      <div class="content">
        <div>
            <div>单价<span>{{houseContent.sell_average}}/㎡</span></div>
            <div v-if="houseContent.floor">楼层<span>{{houseContent.floor.title}}/{{houseContent.all_floor}}层</span></div>
            <div v-if="houseContent.type">类型<span>{{houseContent.type.title}}</span></div>
        </div>
        <div>
          <div v-if="houseContent.orientation">朝向<span>{{houseContent.orientation.title}}</span></div>
          <div v-if="houseContent.renovation">装修<span>{{houseContent.renovation.title}}</span></div>
          <div>年代<span>{{houseContent.building_year}}年</span></div>
        </div>
      </div>
    </div>
    <div class="house_describe">
      <div class="describe_title">
        <div>房源描述</div>
        <div>发布时间:<span>{{houseContent.create_time}}</span></div>
      </div>
      <div class="hexin_mai">
        <div class="hexin_content">{{houseContent.survey}}</div>
      </div>
      <div class="house_author" @click="goWebsit(houseContent.user.id)">
          <div class="img_title">
            <img v-if="houseContent.user" :src="houseContent.user.photo" alt="">
            <div v-if="houseContent.user" class="author_name">{{houseContent.user.name}}</div>
            <!--<div>-->
              <!--<praise-stars :starsNumber="houseContent.xingxing"></praise-stars>-->
            <!--</div>-->
          </div>
        <div><span class="iconfont icon-icon--"></span></div>
      </div>
      <div class="hexin_mai">
        <div class="hexin_title">核心卖点</div>
        <div class="hexin_content">{{houseContent.description}}</div>
      </div>
      <div class="hexin_mai">
        <div class="hexin_title">业主心态</div>
        <div class="hexin_content">{{houseContent.yezhuxintai}}</div>
      </div>
      <!--周边配套-->
      <div  v-if="houseContent.coordinate" class="build_matching border_top">
        <div class="matching_title">
          <div>周边配套</div>
          <!--<div>更多</div>-->
        </div>
        <div class="matching_map">
          <build-map v-if="houseContent.coordinate" :buildName="houseContent.premises.name" :positionArray="houseContent.coordinate"></build-map>
        </div>
      </div>
      <div class="house_more">
        <!--<div>展开全部 <span class="iconfont icon-xiala"></span></div>-->
      </div>
    </div>
  </div>
</template>

<script>
  import PraiseStars from '../../components/common/PraiseStars';
  import BuildMap from '../../components/house/BuildMap';
  export default {
    props:{
      houseContent:{
        type:Object
      }
    },
    name: 'HouseContent',
    components: {PraiseStars,BuildMap},
    data() {
      return {
        // houseContent: {
        //   titleLabel: ['富力红树湾', '度假宜居之地', '现代风格', ' 精装', '两房', '采光通透'],
        //   label: ['小户型', '南北通透', '采光好'],
        //   pay: '119',
        //   houseApartment: '2室2厅1卫',
        //   area: '87',
        //   unitPrice: '14000',
        //   orientation: '南北',
        //   louceng: '3/33',
        //   zhaungxiu: '精准修',
        //   leixing: '普通公寓',
        //   niandai: '2015',
        //   time: '2018-07-04 11:18',
        //   name: '等双子',
        //   xingxing: 4.5,
        //   hexin: '本人在暗示法困苏扩付不或苏付所不军付过不多所军军军军军军军军军晕风格不是发生改变设计风格吧交易所的反光板甲乙双方干部身份干部受教育 设计风格吧手机用户覆盖不睡觉爽肤水爽肤水是发生发顺丰省份省份双方都水电费水电费锁定水电费省份锁定',
        //   xintai: '房东置换,成婚出售价格可以再谈,欢迎看房,随时公平迪欧,肥肉诚勿扰'
        // }
      }
    },
    methods:{
      //经纪人主页
      goWebsit(id){
        this.$router.push('/RealtorWebsite/' + id);
      }
    }
  }
</script>

<style scoped>
  .house_content {
  }

  .house_content .title {
    padding: 5px 10px;
  }

  .house_content .title > span {
    margin-right: 10px;
    color: #000000;
  }

  .house_content .label {
    padding: 5px 10px;
    font-size: 0.8rem;
  }

  .house_content .label > span {
    padding:3px 5px;
    margin-right: 10px;
  }

  .house_content .label > span:nth-child(1) {
    color: #e62129;
    background-color: #ffebea;
  }

  .house_content .label > span:nth-child(2) {
    background-color: #dff1fd;
    color: #42abff;
  }

  .house_content .label > span:nth-child(3) {
    color: #fa6609;
    background-color: #fde9dd;
  }
  .house_content .pay_area{
    display: flex;
    justify-content: space-between;
    padding: 10px;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    margin: 10px 0;
    color: #e6191e;
  }
  .house_content .jiben_information{
    padding: 10px;
    border-bottom: 1px solid #eee;
  }
  .house_content .jiben_information .jiben_title{
    display: flex;
    justify-content: space-between;
    color: #000000;
    height: 1rem;
    line-height: 1rem;
  }
  .house_content .jiben_information .jiben_title span{
    margin-right: 5px;
  }
  .house_content .jiben_information .jiben_title>div:nth-child(2){
    color: #76c2fe;
    font-size: 0.8rem;
  }
  .house_content .jiben_information .content{
    display: flex;
    font-size: 0.8rem;
    color: #999;
  }
  .house_content .jiben_information .content>div{
    width: 50%;
    margin: 5px 0;
  }
  .house_content .jiben_information .content>div span{
    margin-left: 10px;
    color: #000000;
  }
  .house_content .house_describe .describe_title{
    padding: 10px;
    font-size: 1rem;
    display: flex;
    justify-content: space-between;
    color: #000000;
    height: 1rem;
    line-height: 1rem;
  }
  .house_content .house_describe .describe_title>div:nth-child(2){
    font-size: 0.8rem;
    color: #999;
  }
  .house_content .house_describe .house_author{
    margin: 0 10px;
    padding: 10px;
    background-color: #f8f8f8;
    display: flex;
    justify-content: space-between;
    height: 55px;
    line-height: 55px;
  }
  .house_content .house_describe .house_author .img_title{
    display: flex;
  }
  .house_content .house_describe .house_author .img_title .author_name{
    margin:0 20px;
    color: #000000;
  }
  .house_content .house_describe .house_author .img_title img{
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
  .house_content .house_describe .hexin_mai{

  }
  .house_content .house_describe .hexin_mai .hexin_title{
    padding: 10px;
    font-size: 0.9rem;
    color: #000000;
  }
  .house_content .house_describe .hexin_mai .hexin_content{
    padding: 10px;
    font-size: 0.8rem;
    color: #333;
  }
  .house_content .house_describe .house_more{
    padding: 10px;
    color: #999;
    text-align: center;
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
  }
  /*周边配套*/
  .house_content  .build_matching{

  }
  .house_content .build_matching .matching_title {
    display: flex;
    justify-content: space-between;
    padding: 10px;
  }
  .house_content .build_matching .matching_map{
    padding: 10px;
  }
</style>
